
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<span style="font-size:18px;">
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="purchase/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="purchase/css/commonly-used-show.css" />
    <script type="text/javascript" src="purchase/js/jquery.min.js"></script>
    <script type="text/javascript" src="purchase/js/bootstrap.js" ></script>
    <!--  缓存 -->
    <script type="text/javascript" src="purchase/js/jquery.cookie.js"></script>

    <!--  echarts图表生成工具 -->
    <script type="text/javascript" src="purchase/js/echarts.min.js"></script>


    <title>统计与报表</title>

</head>

<body class="mybody">

 <jsp:include page="theTopMenuAdmin.jsp" />



 <div style="margin-left: 50px; margin-right: 50px;">
     <div class="col-lg-4 col-md-offset-4" >
         <ul  class="nav nav-pills nav-justified" role="tablist">
             <li  class="active" ><a href="#montinven" role="tab" data-toggle="pill">月库存</a></li>
             <li ><a href="#annuinven" role="tab"  data-toggle="pill">年库存</a></li>
         </ul>

     </div>

     <hr style="filter: alpha(opacity=100,finishopacity=0,style=3)" width="100%" color="#6f5999" size="3" />

     <div class="text-center">
          <span id="user_messge" style="font-size:10px; color: red;"></span>
     </div>


     <div class="tab-content">
         <div style="margin-top: 10px; " class="tab-pane fade in active" id="montinven">

             <div style="float: right; margin-left: 100px;">
                 <a class="btn btn-primary" href="javascript:void(0);" onclick="queryStatiInfo()">报表导出</a>
             </div>

             <div style="width: 90%; height: 600px; margin-top: 10px; " id="colum_things">

             </div>

             <div style="width: 90%; height: 600px; margin-top: 10px; " id="colum_things1">

             </div>

         </div>


         <div style=" margin-top: 10px; " class=" tab-pane fade" id="annuinven">
             <div style="float: right; margin-left: 100px;">
                 <a class="btn btn-primary" href="javascript:void(0);" onclick="queryStatiInfo()">报表导出</a>
             </div>

             <div style="width: 1200px; height: 600px; margin-top: 10px; " id="colum_things3">

             </div>

             <div style="width: 1200px; height: 600px; margin-top: 10px; " id="colum_things4">

             </div>
         </div>

     </div>


</div>




<script type="text/javascript">
    var userdt = JSON.parse(sessionStorage.getItem("user"));
    if (userdt.result.userName != null){
        $("#usname").text(userdt.result.userName);
    }else {
        $("#usname").text(userdt.result.userLoginName);
    }


    function queryStatiInfo(){
        var postUrl = "${pageContext.request.contextPath}/member/allInboundOutboundList";
        var str = {
            "": ""
        };
        $.ajax({
            type:"post",
            url:postUrl,
            headers: {
                "Content-Type":"application/json"
            },
            data:JSON.stringify(str),
            contentType: "application/json; charset=utf-8",
            dataType:"json",
            success:function(data){
                if (data.status === 0){
                    $("#user_messge").text(data.msg);
                }else {

                    //列标题，逗号隔开，每一个逗号就是隔开一个单元格
                    let str = "创建ID,商品编号,商品类别,单价,数量,入库时间,出库时间,入库人,出库人,供货商,创建时间,更新时间\n";

                    for (var i = 0; i < data.result.items.length; i++) {
                        for(let item in data.result.items[i]){
                            str += data.result.items[i][item] + "\t" + ",";
                        }
                        str += "\n";
                    }
                    //encodeURIComponent解决中文乱码
                    let uri = "data:text/csv;charset=utf-8,\ufeff" + encodeURIComponent(str);
                    //通过创建a标签实现
                    let link = document.createElement("a");
                    link.href = uri;
                    //对下载的文件命名
                    link.download =  "库存报表.csv";
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);

                }

            },
            error:function(xhr,state,errorThrown){
                //alert("发生网络错误，错误码为：" + xhr.status)
                location.href = "${pageContext.request.contextPath}/error";
            }
        });
    }


    window.onload = function(){
        queryStaticInfoList();
    }


    function queryStaticInfoList(){
        var postUrl = "${pageContext.request.contextPath}/member/allInboundOutboundList";
        var str = {
            "": ""
        };
        $.ajax({
            type:"post",
            url:postUrl,
            headers: {
                "Content-Type":"application/json"
            },
            data:JSON.stringify(str),
            contentType: "application/json; charset=utf-8",
            dataType:"json",
            success:function(data){
                if (data.status === 0){
                    $("#user_messge").text(data.msg);
                }else {
                    var saler = JSON.stringify(data);

                    var myList1 = new Array();
                    var myList2 = new Array();

                    for (var i = 0; i < data.result.items.length; i++) {
                        if (data.result.items[i].userType === "1"){
                            myList1.push(data.result.items[i]);
                        }else {
                            myList2.push(data.result.items[i]);
                        }
                    }

                    myList1.sort((a, b) => a.entryTime.localeCompare(b.entryTime));
                    myList2.sort((a, b) => a.deliveryTime.localeCompare(b.deliveryTime));


                   if (myList1.length !== 0 ||　myList2.length !== 0){
                       monthInvent(myList1, myList2);
                       yearInvent(myList1, myList2);
                   }

                }

            },
            error:function(xhr,state,errorThrown){
                //alert("发生网络错误，错误码为：" + xhr.status)
                location.href = "${pageContext.request.contextPath}/error";
            }
        });
    }


    function yearInvent(myinvento, myinvento1){
        var myArray1 = new Array();
        var myArray2 = new Array();
        var myArray3 = new Array();
        var myArray4 = new Array();

        for (var n = 0; n < myinvento.length; n++) {
            var time1 = myinvento[n].entryTime.replace(/\:/g, "-").split("-");

            myArray3.push(time1[0]);
            myArray1.push(myinvento[n].quantity);
        }


        for (var m = 0; m < myinvento1.length; m++) {
            var time2 = myinvento1[m].deliveryTime.replace(/\:/g, "-").split("-");

            myArray4.push(time2[0]);
            myArray2.push(myinvento1[m].quantity);
        }

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("colum_things3"));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: "年入库曲线图"
            },
            tooltip: {},
            legend: {
                data:["入库"]
            },
            xAxis: {
                name: "年份",
                data: myArray3
            },
            yAxis: {
                name: "库存量",
                type: 'value'
            },
            series: [{
                type: "line",
                data: myArray1,
                symbol: 'circle', //折线点设置为实心点
                symbolSize: 8, //折线点的大小
                itemStyle: {
                    normal: {
                        color: '#7d05f4', //改变折线点的颜色
                        lineStyle: {
                            color: '#0541f4' //改变折线颜色
                        }
                    }
                },
                //以下为是否显示，显示位置和显示格式的设置了
                label: {
                    show: true,
                    position: 'top',
                    formatter: '{b}\n{c}'
                }

            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById("colum_things4"));
        // 指定图表的配置项和数据
        var option1 = {
            title: {
                text: "年出库曲线图"
            },
            tooltip: {},
            legend: {
                data:["出库"]
            },
            xAxis: {
                name: "年份",
                data: myArray4
            },
            yAxis: {
                name: "库存量",
                type: 'value'
            },
            series: [{
                type: "line",
                data: myArray2,
                symbol: 'circle', //折线点设置为实心点
                symbolSize: 8, //折线点的大小
                itemStyle: {
                    normal: {
                        color: '#08c5f4', //改变折线点的颜色
                        lineStyle: {
                            color: '#f41808' //改变折线颜色
                        }
                    }
                },
                //以下为是否显示，显示位置和显示格式的设置了
                label: {
                    show: true,
                    position: 'top',
                    formatter: '{b}\n{c}'
                }

            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);

    }

    function monthInvent(myinvento, myinvento1){

        var myArray1 = new Array();
        var myArray2 = new Array();
        var myArray3 = new Array();
        var myArray4 = new Array();

        for (var n = 0; n < myinvento.length; n++) {
            var time1 = myinvento[n].entryTime.replace(/\:/g, "-").split("-");

            myArray3.push(time1[1] + "-" + time1[2]);
            myArray1.push(myinvento[n].quantity);
        }


        for (var m = 0; m < myinvento1.length; m++) {
            var time2 = myinvento1[m].deliveryTime.replace(/\:/g, "-").split("-");

            myArray4.push(time2[1] + "-" + time2[2]);
            myArray2.push(myinvento1[m].quantity);
        }


        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("colum_things"));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: "月入库曲线图"
            },
            tooltip: {},
            legend: {
                data:["入库"]
            },
            xAxis: {
                name: "月份",
                data: myArray3
            },
            yAxis: {
                name: "库存量",
                type: 'value'
            },
            series: [{
                type: "line",
                data: myArray1,
                symbol: 'circle', //折线点设置为实心点
                symbolSize: 8, //折线点的大小
                itemStyle: {
                    normal: {
                        color: '#7d05f4', //改变折线点的颜色
                        lineStyle: {
                            color: '#0541f4' //改变折线颜色
                        }
                    }
                },
                //以下为是否显示，显示位置和显示格式的设置了
                label: {
                    show: true,
                    position: 'top',
                    formatter: '{b}\n{c}'
                }

            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById("colum_things1"));
        // 指定图表的配置项和数据
        var option1 = {
            title: {
                text: "月出库曲线图"
            },
            tooltip: {},
            legend: {
                data:["出库"]
            },
            xAxis: {
                name: "月份",
                data: myArray4
            },
            yAxis: {
                name: "库存量",
                type: 'value'
            },
            series: [{
                    type: "line",
                    data: myArray2,
                    symbol: 'circle', //折线点设置为实心点
                    symbolSize: 8, //折线点的大小
                    itemStyle: {
                        normal: {
                            color: '#08c5f4', //改变折线点的颜色
                            lineStyle: {
                                color: '#f41808' //改变折线颜色
                            }
                        }
                    },
                    //以下为是否显示，显示位置和显示格式的设置了
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{b}\n{c}'
                    }

                }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);
    }


</script>



</body>
</html>
</span>